<!--
- Author:  LiShibin.
- Date:    2017/7/15 0015.
- File:    list.
-->
<template>
  <div class="comment-list">
    <div class="Web_Box" style="margin-bottom: 0">
      <div class="bg_fff p20 f24 f-cb mb20">
        <div class="f-cb"><span class="fl cr_4e4e4e pt5" style="line-height: 24px;">小伙伴评价</span>
          <div class="fl start ml20">
            <i class="iconfont" style="line-height: 24px;" :class="{'icon-star': commentStar < 1 , 'icon-staron cr_41a536': commentStar >= 1}"></i>
            <i class="iconfont" style="line-height: 24px;" :class="{'icon-star': commentStar < 2 , 'icon-staron cr_41a536': commentStar >= 2}"></i>
            <i class="iconfont" style="line-height: 24px;" :class="{'icon-star': commentStar < 3 , 'icon-staron cr_41a536': commentStar >= 3}"></i>
            <i class="iconfont" style="line-height: 24px;" :class="{'icon-star': commentStar < 4 , 'icon-staron cr_41a536': commentStar >= 4}"></i>
            <i class="iconfont" style="line-height: 24px;" :class="{'icon-star': commentStar < 5 , 'icon-staron cr_41a536': commentStar >= 5}"></i>
          </div>
          <span class="fl cr_f23030 pt5 ml20" style="line-height: 24px;">{{commentPercent}}% 好评</span>
        </div>
        <div class="evaluate_tab mt20">
        </div>
      </div>
      <div
        v-infinite-scroll="loadMoreComment"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="evalue cr_4e4e4e bg_fff" v-for="item in commentList.data" v-show="item.geval_state == 0 || item.geval_frommemberid == memberInfo.member_id">
          <div class="eva_name f-cb">
            <div class="fl h_name"><img :src="$config.website + $config.avatarSrc + item.member_avatar">></div>
            <p class="fl f24 ml20 pt5">{{item.geval_frommembername | hidePartName}}</p></div>
          <div class="eva_text mt20">{{item.geval_content}}</div>
          <div class="evalve_box">
            <div class="cloth"></div>
          </div>
          <p class="cr_aaa f22 pt20">{{item.geval_addtime | hideTime}} &nbsp;&nbsp;&nbsp;&nbsp;<span v-for="attr in item.goods_spec">{{attr.name}} </span>
          </p>
          <div class="eva_text mt20" v-show="item.geval_explain">卖家回复：{{item.geval_explain}}</div>
        </div>
        <loading-more :allLoaded="commentList.allLoaded" :show="commentList.data.length > 0"></loading-more>
        <empty-data :show="commentList.allLoaded && commentList.data.length <= 0"></empty-data>
      </div>
    </div>
    <!--<back-nav></back-nav>-->
    <div class="BottomGd">
      <button class="but_2 wauto" type="button" @click="goBack">返回商品详情</button>
    </div>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        commentId: this.$route.params.id, // 评论id
        commonid: this.$route.query.commonid, // 商品commonid
        commentList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 5, data: []},
        commentStar: '',
        commentPercent: ''
      }
    },
    components: {},
    created() {
      this.getGoodsCommentList(this.commentId, this.commentList.page, this.commentList.pageSize)
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      getGoodsCommentList(id, page, pageSize) {
        this.commentList.loading = true
        this.$request.getGoodsCommentList(id, page, pageSize).then(data => {
          if (this.$utils.isEmptyObject(data)) {
            return
          }
          if (data.data.length < this.commentList.pageSize) {
            this.commentList.allLoaded = true
          }
          this.commentList.data = [...this.commentList.data, ...data.data]
          this.commentStar = data.score
          this.commentPercent = data.percentage
        }).finally(() => {
          this.commentList.requested = true
          this.commentList.loading = false
        })
      },
      loadMoreComment() {
        if (this.commentList.loading || this.commentList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsCommentList(this.commentId, ++this.commentList.page, this.commentList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style lang="less">
  .icon-staron {
    .icon-staron {
      color: #41a536
    }
  }
</style>